<template>
	<view class="u-page">
		<view class="box-bg">
			<uni-nav-bar :fixed='true' left-icon="left" :border="false" @clickLeft='handleBack' title="单位管理详情"
				height="65px" color="#fff" backgroundColor="#00aaff" />
		</view>
		<view class="u-page__item">

			<up-collapse :value="0" @change="change" @close="close" @open="open">
				<up-collapse-item name="0" title="基本信息">
					<view class="u-page__item__list">
						<text>驾驶员姓名</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>联系方式</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>性别</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>出生年月</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>民族</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>身份证号</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>工作关系性质</text>
						<text class="u-page__item__list__title">5人2人张云0371-65897854</text>
					</view>
					<view class="u-page__item__list">
						<text>工作状态</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>职称/健康状况</text>
						<text class="u-page__item__list__title">你好</text>
					</view>

				</up-collapse-item>
			</up-collapse>

			<up-collapse :value="0" @change="change" @close="close" @open="open">
				<up-collapse-item name="0" title="证件信息">
					<view class="u-page__item__list">
						<text>驾驶员姓名</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>联系方式</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>性别</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>出生年月</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>民族</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>身份证号</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>工作关系性质</text>
						<text class="u-page__item__list__title">5人2人张云0371-65897854</text>
					</view>
					<view class="u-page__item__list">
						<text>工作状态</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>职称/健康状况</text>
						<text class="u-page__item__list__title">你好</text>
					</view>

				</up-collapse-item>
			</up-collapse>

			<up-collapse :value="0" @change="change" @close="close" @open="open">
				<up-collapse-item name="0" title="其他信息">
					<view class="u-page__item__list">
						<text>驾驶员姓名</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>联系方式</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>性别</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>出生年月</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>民族</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>身份证号</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>工作关系性质</text>
						<text class="u-page__item__list__title">5人2人张云0371-65897854</text>
					</view>
					<view class="u-page__item__list">
						<text>工作状态</text>
						<text class="u-page__item__list__title">你好</text>
					</view>
					<view class="u-page__item__list">
						<text>职称/健康状况</text>
						<text class="u-page__item__list__title">你好</text>
					</view>

				</up-collapse-item>
			</up-collapse>

			<up-collapse :value="0" @change="change" @close="close" @open="open">
				<up-collapse-item name="0" title="附件信息">
					<up-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" :lazy-load="true"></up-image>
					<up-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" :lazy-load="true"></up-image>

				</up-collapse-item>
			</up-collapse>


		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	const unitId = ref('')

	// 通过事件通道获取单位id
	onLoad((option) => {
		console.log(option);
		unitId.value = option.id
	})

	function handleBack() {

		uni.navigateBack();
	}
</script>

<style lang="scss" scoped>
	.u-page {
		padding: 0;

		&__item {
			background-color: #fff;

			&__list {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;
				color: #797E84;
				font-size: 13px;

				&__title {
					color: #333;
					font-size: 14px;
				}
			}


			&__title {
				color: #333;
				background-color: #fff;
				padding: 15px;
				font-size: 15px;

				&__slot-title {

					font-size: 14px;
				}
			}

			&__table {
				&__item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 15px;
					flex: 1;

					&__left {
						color: #797E84;
						font-size: 13px;
					}

					&__right {
						display: flex;
						justify-content: space-around;
						align-items: center;
						color: #333;
						font-size: 14px;

						&__box {
							width: 40px;
							height: 40px;

							text-align: center;

						}
					}
				}
			}
		}
	}

	.u-collapse-content {

		font-size: 14px;
	}
</style>